<template>
  <view class="contract">
    <wd-cell title="合同文件" value="查看合同文件" is-link @click="previewWechat(fileUrl)"/>
    <wd-cell title="合同附件"/>
    <view class="details-contract flex flex-between">
      <view class="flex flex-center mb20" v-for="item in urlList" :key="item">
        <image v-if="item.fileUrl.includes('pdf') ||item.fileUrl.includes('doc')"
               @click="previewWechat(item.fileUrl)"
               src="http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/miniapp/%E5%AE%B9%E5%99%A8%402x%20(4).png"></image>
        <wd-img v-else :width="40" :height="40" :src="item.fileUrl" :enable-preview="true" mode="aspectFill"/>
        <view class="file-name">{{ item.fileName }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {onLoad} from "@dcloudio/uni-app";
import {ref} from "vue";
import {getContractFile} from "@/api/contract";

const contractId = ref()
const urlList = ref([])
const fileUrl = ref()
onLoad((option) => {
  console.log(option);
  contractId.value = option.contractId
  getFilesList(option.contractId)
})
// 打开附件
const previewWechat = (urlPdf) => {
  uni.showLoading({
    title: '正在加载中..'
  })
  uni.downloadFile({
    url: urlPdf,
    success: function (res) {
      let filePath = res.tempFilePath;
      uni.openDocument({
        filePath: filePath,
        showMenu: true,
        success: function (res) {
          console.log('打开文档成功');
          uni.hideLoading()
        },
      });
    },
    complete: function (r) {
      uni.hideLoading()
    }
  });
}
const getFilesList = async (contractId) => {
  const {data} = await getContractFile(contractId)
  fileUrl.value = data.fileUrl
  urlList.value = data.urlList
}
</script>

<style scoped lang="scss">
.contract {
  background: #FFFFFF;
  height: 100vh;

  .details-contract {
    background: #FFFFFF;
    padding: 0 20rpx 20rpx;
    flex-wrap: wrap;
    font-size: 24rpx;

    image {
      width: 64rpx;
      height: 64rpx;
    }
  }

  .file-name {
    width: 140rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

</style>